---
alert-message: ''
categories: [Charts]
layout: page
title: Bullet Charts
resource: true
---
<h2>Bullet Chart</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    <div class="bullet-chart-pf">
      <div class="bullet-chart-pf-chart">
        <div class="bullet-chart-pf-title-container">
          <div class="bullet-chart-pf-title">Text Label</div>
          <div class="bullet-chart-pf-details">Measure Details</div>
        </div>
        <div class="bullet-chart-pf-container">
          <div class="bullet-chart-pf-data-container">
            <div class="bullet-chart-pf-values-container">
              <div class="bullet-chart-pf-value-bar" style="left: 0; width: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
              <div class="bullet-chart-pf-value-bar" style="left: 0; width: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
            </div>
            <div class="bullet-chart-pf-threshold-indicator warning" style="left: 70%;"></div>
            <div class="bullet-chart-pf-threshold-indicator error" style="left: 90%;"></div>
            <div class="bullet-chart-pf-range-bar range-1" style="width: 50%; z-index: 50;"></div>
            <div class="bullet-chart-pf-range-bar range-2" style="width: 75%; z-index: 25;"></div>
            <div class="bullet-chart-pf-range-bar range-3" style="width: 90%; z-index: 10;"></div>
          </div>
          <div class="bullet-chart-pf-axis">
            <span class="bullet-chart-pf-axis-tic" style="left: calc(0% - 15px);">0</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(25% - 15px);">25</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(50% - 15px);">50</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(75% - 15px);">75</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(100% - 15px);">100</span>
          </div>
        </div>
        <span class="bullet-chart-pf-overflow"></span>
      </div>
      <div class="bullet-chart-pf-legend">
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(57, 165, 220);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-1"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-2"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-3"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 3</span>
        </span>
      </div>
    </div>
  </div>
</div>

<h2>Bullet Chart - Vertical</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12" style="height: 400px;">
    <div class="bullet-chart-pf bullet-chart-pf-vertical">
      <div class="bullet-chart-pf-chart">
        <div class="bullet-chart-pf-title-container">
          <div class="bullet-chart-pf-title">Text Label</div>
          <div class="bullet-chart-pf-details">Measure Details</div>
        </div>
        <div class="bullet-chart-pf-vertical-data-container">
          <div class="bullet-chart-pf-container show-axis">
            <div class="bullet-chart-pf-data-container">
              <div class="bullet-chart-pf-values-container">
                <div class="bullet-chart-pf-value-bar" style="bottom: 0; height: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
                <div class="bullet-chart-pf-value-bar" style="bottom: 0; height: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
              </div>
              <div class="bullet-chart-pf-threshold-indicator warning" style="bottom: 70%;"></div>
              <div class="bullet-chart-pf-threshold-indicator error" style="bottom: 90%;"></div>
              <div class="bullet-chart-pf-range-bar range-1" style="height: 50%; z-index: 50;"></div>
              <div class="bullet-chart-pf-range-bar range-2" style="height: 75%; z-index: 25;"></div>
              <div class="bullet-chart-pf-range-bar range-3" style="height: 90%; z-index: 10;"></div>
            </div>
            <div class="bullet-chart-pf-axis">
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(0% - 10px);">0</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(25% - 10px);">25</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(50% - 10px);">50</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(75% - 10px);">75</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(100% - 10px);">100</span>
            </div>
          </div>
        </div>
        <span class="bullet-chart-pf-overflow"></span>
      </div>
      <div class="bullet-chart-pf-legend">
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(57, 165, 220);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-1"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-2"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-3"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 3</span>
        </span>
      </div>
    </div>
  </div>
</div>

<h2>Bullet Chart - Dots</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12">
    <div class="bullet-chart-pf">
      <div class="bullet-chart-pf-chart">
        <div class="bullet-chart-pf-title-container">
          <div class="bullet-chart-pf-title">Text Label</div>
          <div class="bullet-chart-pf-details">Measure Details</div>
        </div>
        <div class="bullet-chart-pf-container">
          <div class="bullet-chart-pf-data-container">
            <div class="bullet-chart-pf-values-container">
              <div class="bullet-chart-pf-value-dot" style="left: 25%; z-index: 125; background-color: rgb(0, 136, 206);"></div>
              <div class="bullet-chart-pf-value-dot" style="left: 100%; z-index: 150; background-color: rgb(57, 165, 220);"></div>
            </div>
            <div class="bullet-chart-pf-threshold-indicator warning" style="left: 70%;"></div>
            <div class="bullet-chart-pf-threshold-indicator error" style="left: 90%;"></div>
            <div class="bullet-chart-pf-range-bar range-1" style="width: 50%; z-index: 50;"></div>
            <div class="bullet-chart-pf-range-bar range-2" style="width: 75%; z-index: 25;"></div>
            <div class="bullet-chart-pf-range-bar range-3" style="width: 90%; z-index: 10;"></div>
          </div>
          <div class="bullet-chart-pf-axis">
            <span class="bullet-chart-pf-axis-tic" style="left: calc(0% - 15px);">0</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(25% - 15px);">25</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(50% - 15px);">50</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(75% - 15px);">75</span>
            <span class="bullet-chart-pf-axis-tic" style="left: calc(100% - 15px);">100</span>
          </div>
        </div>
        <span class="bullet-chart-pf-overflow"></span>
      </div>
      <div class="bullet-chart-pf-legend">
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(57, 165, 220);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-1"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-2"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-3"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 3</span>
        </span>
      </div>
    </div>
  </div>
</div>

<h2>Bullet Chart - Vertical - Dots</h2>
<div class="row">
  <div class="col-lg-4 col-sm-6 col-xs-12" style="height: 400px;">
    <div class="bullet-chart-pf bullet-chart-pf-vertical">
      <div class="bullet-chart-pf-chart">
        <div class="bullet-chart-pf-title-container">
          <div class="bullet-chart-pf-title">Text Label</div>
          <div class="bullet-chart-pf-details">Measure Details</div>
        </div>
        <div class="bullet-chart-pf-vertical-data-container">
          <div class="bullet-chart-pf-container show-axis">
            <div class="bullet-chart-pf-data-container">
              <div class="bullet-chart-pf-values-container">
                <div class="bullet-chart-pf-value-dot" style="bottom: 25%; background-color: rgb(0, 136, 206); z-index: 125;"></div>
                <div class="bullet-chart-pf-value-dot" style="bottom: 100%; background-color: rgb(57, 165, 220); z-index: 150;"></div>
              </div>
              <div class="bullet-chart-pf-threshold-indicator warning" style="bottom: 70%;"></div>
              <div class="bullet-chart-pf-threshold-indicator error" style="bottom: 90%;"></div>
              <div class="bullet-chart-pf-range-bar range-1" style="height: 50%; z-index: 50;"></div>
              <div class="bullet-chart-pf-range-bar range-2" style="height: 75%; z-index: 25;"></div>
              <div class="bullet-chart-pf-range-bar range-3" style="height: 90%; z-index: 10;"></div>
            </div>
            <div class="bullet-chart-pf-axis">
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(0% - 10px);">0</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(25% - 10px);">25</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(50% - 10px);">50</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(75% - 10px);">75</span>
              <span class="bullet-chart-pf-axis-tic" style="bottom: calc(100% - 10px);">100</span>
            </div>
          </div>
        </div>
        <span class="bullet-chart-pf-overflow"></span>
      </div>
      <div class="bullet-chart-pf-legend">
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(57, 165, 220);"></span>
          <span class="bullet-chart-pf-legend-item-text">Data1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-1"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 1</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-2"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 2</span>
        </span>
        <span class="bullet-chart-pf-legend-item">
          <span class="bullet-chart-pf-legend-item-box range-3"></span>
          <span class="bullet-chart-pf-legend-item-text">Range 3</span>
        </span>
      </div>
    </div>
  </div>
</div>
